<!--组件之间的切换 --> 

<!-- 引入vue框架 -->
<script src="vue.js"></script> 

<!-- 界面显示 -->
<div id="app"> 
     <a href="#" @click.prevent="flag?flag:flag=!flag">登录</a>
     <a href="#" @click.prevent="flag?flag=!flag:flag">注册</a>
     <login v-if="flag"></login> 
     <reg v-else></reg> 
</div> 
<!-- 登录界面模板 --> 
<template id="loginTmp"> 
    <div> 
       <table border=""> 
          <tr> 
             <td><label>用户名</label></td> 
            <td><input type="text" id="username" maxlength="20" /></td> 
        </tr> 
        <tr> 
           <td><label>密码</label></td> 
           <td><input type="password" id="pwd1" maxlength="20" /></td> 
        </tr> 

        <tr> 
            <td colspan="2"> 
               <button @click="tijiao">登录</button> 
            </td> 
        </tr> 
    </table> 
  </div> 
</template>
<!-- 注册界面模板 --> 
 <template id="regTmp"> 
     <div> 
         <table border="1"> 
             <tr> 
                <td><label>用户名</label></td> 
                <td><input type="text" id="username" maxlength="20" /></td> 
            </tr> 
            <tr> 
                <td><label>密码</label></td> 
                <td><input type="password" id="pwd" maxlength="20" /></td> 
            </tr> 
            <tr> 
                <td><label>确认密码</label></td> 
                <td><input type="password" id="pwd2" maxlength="20" /></td> 
            </tr> 
            <tr> 
                <td colspan="2"> 
                    <button @click="zhuce" style="width: 100%;">注册</button> 
                </td> 
            </tr> 
        </table> 
    </div> 
 </template>
<!-- 定义脚本 --> 
<script> 
     // 注册登录组件 
     Vue. component("login",{ 
          // 在模板中在外层一定放一个div 
          //template:'<div>登录界面</div>'
          template:'#loginTmp' ,
          methods:{
            tijiao(){
                alet("准备登录");
            }
          }
     }) 
    // 注册注册组件 
    Vue.component("reg",{ 
        // 在模板中在外层一定放一个div 
        //template:'<div>注册页面</div>' 
        template:'#regTmp',
        methods:{
            zhuce(){
                console.log("登录信息注册")
            }
        }
    }) 
    var vue=new Vue({ 
        el:'#app', 
        data:{ 
           flag: true, 
        }
    }) 
</script>